// 全局样式
html,
body,
#app {
  height: 100%;
  width: 100%;
}

.action_option {
  border-bottom: 1px solid #bdc3c7;
  text-align: center;
  padding: 2px 30px;
}

.action_option:hover {
  color: #fff;
  background: rgb(24, 144, 255);
  cursor: pointer;
}

.border {
  border: solid 1px #bdc3c7;
}

.border_top {
  border-top: solid 1px #bdc3c7;
}

.border_bottom {
  border-bottom: solid 1px #bdc3c7;
}

.border_right {
  border-right: solid 1px #bdc3c7;
}

.border_left {
  border-left: solid 1px #bdc3c7;
}

.dark_border {
  border: solid 1px #95a5a6;
  box-shadow: inset rgba(0, 0, 0, .15) 0px 1px 2px;
}

.border_bottom_none {
  border-bottom: none;
}

.border_radius10 {
  border-radius: 10px;
}

// 布局相关
.inline {
  display: inline-block;
}

.margin5 {
  margin: 5px;
}

.margin10 {
  margin: 10px;
}

.t_margin10 {
  margin-top: 10px;
}

.b_margin10 {
  margin-bottom: 10px;
}

.b_margin5 {
  margin-bottom: 5px;
}

.t_b_margin10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.r_margin2 {
  margin-right: 2px;
}

.r_margin5 {
  margin-right: 5px;
}

.r_margin10 {
  margin-right: 10px;
}

.l_margin5 {
  margin-left: 5px;
}

.l_margin10 {
  margin-left: 10px;
}

.l_margin20 {
  margin-left: 20px;
}

.t_b_padding5 {
  padding: 5px 0;
}

.b_padding10 {
  padding-bottom: 10px;
}

.t_padding10 {
  padding-top: 10px;
}

.l_r_padding5 {
  padding: 0 5px;
}

.padding5 {
  padding: 5px !important;
}

.padding10 {
  padding: 10px;
}

.r_padding5 {
  padding-right: 5px;
}

.l_padding5 {
  padding-left: 5px;
}

.align_center {
  text-align: center;
}

.align_right {
  text-align: right
}

.header_action_option {
  display: inline-block;
  height: 24px;
  margin-right: 15px;
  padding: 2px;
  border: 1px solid #ecf0f1;
}

.header_action_option:hover {
  border-top: solid 1px #bdc3c7;
  border-left: solid 1px #bdc3c7;
  border-right: solid 1px #95a5a6;
  border-bottom: solid 1px #95a5a6;
  background: #fff;
  padding-bottom: 10px;
  cursor: pointer;
}

// flex布局
.flex {
  display: flex;
}

.flex_justify_between {
  @extend .flex;
  justify-content: space-between;
}

.flex_justify_around {
  @extend .flex;
  justify-content: space-around;
}

.flex_justify_center {
  @extend .flex;
  justify-content: center;
}

.flex_justify_end {
  @extend .flex;
  justify-content: flex-end;
  ;
}

.flex_items_center {
  @extend .flex;
  align-items: center;
}

.flex_center {
  @extend .flex;
  align-items: center;
  justify-content: center;
}

.wrap_flex {
  @extend .flex;
  flex-wrap: wrap;
}
.expand{
  flex:1;
}

// 主背景色
.main_bg {
  background: #ecf0f1;
}

.blue_bg {
  background: #1890ff;
}

.main_bg_bar {
  background: #ecf0f1;
  height: 30px;
  padding: 5px 10px;
}

// 字体及字体颜色
.font16 {
  font-size: 16px;
}

.font_bold {
  font-weight: bold;
}

.color_red {
  color: red;
}

.color_gray {
  color: gray;
}
.color_white{
  color: white;
}

.color_blue{
  color:#036EDF
}

// 表格样式
.label_col {
  @extend .main_bg;
  @extend .border_right;
  text-align: right;
  padding: 5px !important;
}

.label_value {
  padding: 5px !important;
}


.label_title {
  @extend .main_bg;
  @extend .border_right;
  text-align: center;
  padding: 5px !important;
}

.value_col {
  padding: 5px !important;
}
.space2{
  letter-spacing: 2px;
}

// 按钮
.gray_button {
  background: rgb(128, 128, 128);
}

// 常用组件
.reminders_modal {
  height: 450px;
  overflow: scroll;
}

// 多行省略
.ellipsis3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
}